<template>
  <entity-view
    :operator-type="operatorType"
    :model="beanInfo"
    @submit="submit"
    :rules="rules"
    ref="form"
  >
    <div class="sub-content-flex">
      <form-item
        label="拓展经理角色"
        v-model="beanInfo.roleType"
        prop="roleType"
        inputType="select"
        :options="roleTypeList"
        @change="(value) => handleChange(value, 'roleType')"
      ></form-item>
      <form-item
        label="手机号"
        v-model="beanInfo.managerPhone"
        prop="managerPhone"
      ></form-item>
      <form-item
        label="姓名"
        v-model="beanInfo.managerName"
        prop="managerName"
      ></form-item>
      <form-item
        label="员工号"
        v-model="beanInfo.managerId"
        prop="managerId"
      >
      </form-item>
      <form-item
        label="地区代码－省"
        v-model="beanInfo.province"
        prop="province"
        inputType="select"
        :options="provinceList"
        @change="(value) => handleChange(value, 'province')"
      ></form-item>
      <form-item
        label="地区代码－市"
        v-model="beanInfo.city"
        prop="city"
         inputType="select"
        :options="cityList"
        @click.native="getCity"
        @change="(value) => handleChange(value, 'city')"
      ></form-item>
      <form-item
        label="地区代码－区"
        v-model="beanInfo.area"
        prop="area"
         inputType="select"
        :options="areaList"
        @click.native="getArea"
        @change="(value) => handleChange(value, 'area')"
      ></form-item>
      <form-item
        label="收单机构类型"
        inputType="select"
        v-model="beanInfo.signInstType"
        prop="signInstType"
        :options="signInstTypeList"
        @change="(value) => handleChange(value, 'signInstType')"
      ></form-item>
      <form-item
        label="收单机构"
        inputType="select"
        v-model="beanInfo.signInstIdOrg"
        prop="signInstIdOrg"
        :options="signInstIdOrgList"
        @change="(value) => handleChange(value, 'signInstIdOrg')"
        v-if="beanInfo.signInstType === 'BANK'"
      ></form-item>
      <form-item
        label="收单机构"
        inputType="select"
        v-model="beanInfo.signInstIdAgent"
        prop="signInstIdAgent"
        :options="signInstIdAgentList"
        @change="(value) => handleChange(value, 'signInstIdAgent')"
        v-if="beanInfo.signInstType === 'AGENT'"
      ></form-item>
    </div>

  </entity-view>
</template>
<script>
import EntityView from "../../../../components/common/entityView/EntityView.vue";
import FormItem from "../../../../components/common/entityView/FormItem.vue";

export default {
  name: "ManagerInfoOperation",
  components: {
    EntityView,
    FormItem,
  },
  props: {
    query: Object,
  },
  data: function () {
    return {
      instId:"",
      modalTitle: "",
      operatorType: "add",
      modalVisible: true,
      beanInfo: {
        roleType:"",
        managerPhone:"",
        managerName:"",
        managerId:"",
        signInstType:"",
      },
      rules: {
        roleType: [{ required: true, message: "必填", trigger: "blur" }],
        managerPhone: [{ required: true, message: "必填", trigger: "blur" },{ pattern:/^1\d{10}$/ , message: '请输入有效的手机号码', trigger: 'blur' }],
        managerName: [{ required: true, message: "必填", trigger: "blur" }],
        managerId: [{ required: true, message: "必填", trigger: "blur" }],
        signInstType: [{ required: true, message: "必填", trigger: "blur" }],
        signInstIdOrg: [{ required: true, message: "必填", trigger: "blur" }],
        signInstIdAgent: [{ required: true, message: "必填", trigger: "blur" }],
      },
      roleTypeList: [
        { value: "40", name: "40-拓展经理" },
        { value: "41", name: "41-拓展经理审核员" },
      ],
      provinceList: [],
      cityList: [],
      areaList: [],
      signInstTypeList: [
         { value: "BANK", name: "银行" },
        { value: "AGENT", name: "代理商" },
      ],
      signInstIdOrgList:[],
      signInstIdAgentList:[],
      loading: false,
      pageInfo: {},
    };
  },
  methods: {
    handleChange(value,param) {
      this.beanInfo[param] = value;
      if(value === 'BANK'){
        this.getBank()
      }else if(value === 'AGENT'){
        this.getAgent()
      }
    },

    async submit() {
      let res;
      switch (this.operatorType) {
        case "add":
          res = await this.edit();
          break;
        case "edit":
          res = await this.edit();
          break;
        case "cancel":
          res = await this.edit();
          break;
        case "view":
          res = true;
          break;
        default:
          break;
      }
      return res;
    },
    async edit() {
      const res = await this.$refs.form.validate();
      if (res) {
        let optFlag = {add: `add`, edit: `upd`, view: `view`, use: `use`, stop: `stop`, cancel: `cancel`}[this.operatorType]
        if(this.beanInfo.signInstType === 'BANK'){
          this.beanInfo.signInstId = this.beanInfo.signInstIdOrg
        }else if(this.beanInfo.signInstType === 'AGENT'){
          this.beanInfo.signInstId = this.beanInfo.signInstIdAgent
        }
        const params = {
          ...this.beanInfo,
          optFlag: optFlag,
        };
        const res = await this.$post("/admin/merParam/managerInfo/edit", params);
        if (res.data.code === "100000") {
          this.$message.success(res.data.message);
          return true;
        } else {
          this.$message.error(res.data.message);
          return false;
        }
      }
    },
    resetFields() {
      return this.$refs.form && this.$refs.form.resetFields();
    },
    setOperatorType(type) {
      this.operatorType = type;
    },
    async setBeanInfo({...beanInfo},instId) {
      this.beanInfo = beanInfo;
      this.instId = instId;
      await this.getOne();
      await this.getProvince();
      if(this.beanInfo.signInstType === 'BANK'){
        this.getBank()
      }else if(this.beanInfo.signInstType === 'AGENT'){
        this.getAgent()
      }
    },
    async getOne() {
      try {
        let optFlag = {add: `add`, edit: `upd`, view: `view`, use: `use`, stop: `stop`, cancel: `cancel`}[this.operatorType]
        const param = {
          instId: this.instId,
          optFlag: optFlag,
        }
        if(optFlag !== 'add'){
          param.id = this.beanInfo.id
        }
        const res = await this.$get("/admin/merParam/managerInfo/edit",param );
        this.beanInfo = res.data.entity || {};
      } catch (e) {
        console.error(e);
      }
    },
    async getBank() {
      try {
        const res = await this.$get("/admin/merParam/UpmpOrganization/instIdOrganizationSelect2List", {
          instId: this.beanInfo.instId
        });
        this.signInstIdOrgList = ((res.data && res.data.rows) || []).map(i => {
          i.name = i.id + ' - ' + i.name
          i.value = i.id
          return i
        })
      } catch (e) {
        console.error(e);
      }
    },
    async getAgent() {
      try {
        const res = await this.$get("/admin/merParam/agentInfo/agentCdSelect2List", {
          q:encodeURIComponent(`&${this.beanInfo.instId}`)
        });
         if (res.status === 200) {
                 this.signInstIdAgentList = res.data.results.map(i => {
                   i.name = i.id + ' - ' + i.name
                   i.value = i.id
                   return i
                 }) || {};
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getProvince() {
      try {
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          l:"01"
        });
        if (res.status === 200) {
          this.provinceList = res.data.map(i => {
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getCity() {
      try {
        if(typeof this.beanInfo.province === 'undefined' || this.beanInfo.province === ''){
          this.warning("请先选择省");
          return ;
        }
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          p:this.beanInfo.province,
          l:"02"
        });
        if (res.status === 200) {
          this.cityList = res.data.map(i => {
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getArea() {
      try {
        if(typeof this.beanInfo.city === 'undefined' || this.beanInfo.city === ''){
          this.warning("请先选择市");
          return ;
        }
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          p:this.beanInfo.city,
          l:"03"
        });
        if (res.status === 200) {
          this.areaList = res.data.map(i => {
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    warning(message) {
      const h = this.$createElement;
      this.$warning({
        title: '提示',
        content: h('div', {}, [
          h('p', message),
        ]),
        onOk() {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../../../static/less/Common";
.subtitle {
  width: 100%;
  font-size: 18px;
  margin-bottom: 10px;
}
.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
}
</style>
